{{define "admin/display.html"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wblog - Post</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/libs/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/libs/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/libs/Ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="/static/libs/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <link rel="stylesheet" href="/static/libs/sweetalert/sweetalert.css" type="text/css"/>
    <link rel="stylesheet" href="/static/libs/jbox/jBox.css">
    <link rel="stylesheet" href="/static/libs/iCheck/flat/_all.css" type="text/css"/>
    <link rel="stylesheet" href="/static/libs/daterangepicker/daterangepicker-bs3.css" type="text/css"/>
    <![endif]-->
    <!-- Google Font -->
{{/*<link rel="stylesheet"*/}}

    <link rel="stylesheet" href="/static/font/Souce+Sans.css" type="text/css"/>
    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/bootstrap-notify.css">
    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/styles/alert-blackgloss.css">

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

{{template "admin/navbar.html" .}}
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                {{if gt (len .user.AvatarUrl) 0}}
                    <img src="{{.user.AvatarUrl}}" class="img-circle" alt="User Image">
                {{else}}
                    <img src="/static/libs/AdminLTE/img/avastar.jpg" class="img-circle" alt="User Image">
                {{end}}
                </div>
                <div class="pull-left info">
                    <p>{{.user.Email}}</p>
                    <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
                </div>
            </div>
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">MAIN NAVIGATION</li>
                <li class="active">
                    <a href="/admin/index">
                        <i class="fa fa-dashboard"></i> <span>总览</span>
                    </a>
                </li>


                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-th"></i>
                        <span>班级</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/seeclass"><i class="fa fa-circle-o"></i> 查看班级</a></li>
                        <li><a href="/admin/managerclass"><i class="fa fa-circle-o"></i> 管理班级</a></li>
                    </ul>
                </li>


                <li class="treeview active">
                    <a href="#">
                        <i class="fa fa-laptop"></i>
                        <span>测试</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/getexams"><i class="fa fa-circle-o"></i> 查看小测</a></li>
                        <li class="active"><a href="/admin/managerexam"><i class="fa fa-circle-o"></i> 管理小测</a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-folder"></i>
                        <span>公告</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/seenotice"><i class="fa fa-circle-o"></i> 查看公告</a></li>
                        <li><a href="/admin/managernotice"><i class="fa fa-circle-o"></i> 管理公告</a></li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class='notifications top-right'></div>
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <a class="btn btn-success" href="" data-href="/admin/exam/save"
                   data-toggle="modal" data-target="#confirm-save">
                    <span class="glyphicon glyphicon-plus"></span>保存测试</a>
                <a class="btn btn-info" href="/admin/getexams"
                >
                    <span class="glyphicon glyphicon-backward"></span>返回</a>

            </h1>
            <ol class="breadcrumb">
                <li><a href="/admin/getexams"><i class="fa fa-dashboard"></i>测试</a></li>
                <li class="active"><a href="#">查看测试</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content box box-widget">

            <div class="box-header with-border">
                <div class="user-block">
                    <img class="img-circle" src="/static/images/logo0.png" alt="User Image">
                    <span class="username"><a href="#">{{.exam.Title}}</a></span>
                    <span class="description">描述:&nbsp&nbsp{{.exam.DesCrib}}</span>
                    <span class="description">发布于:&nbsp &nbsp{{.exam.CreatedAt.Format "2006 Jan 02"}}</span>
                </div>
                <!-- /.user-block -->

                <!-- /.box-tools -->
            </div>


            <div class="row box-body">


                <!-- /.col -->
            {{range $i, $v :=.questions}}
                <div class="col-md-3">
                    <div class="box box-success  box box-widget box-solid">
                        <div class="box-header with-border">
                            <input name="qid" type="hidden" value="{{$v.ExpressStr}}"/>
                            <h3 class="box-title" style="    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 354px;">第{{add $i 1}}题:&nbsp&nbsp {{$v.ExpressStr}}</h3>


                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-qid="{{$i}}" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                            <!-- /.box-tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            答案: &nbsp {{$v.Answer}}
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>

            {{end}}

            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->


<div class="modal fade" id="confirm-delete2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                请确认
            </div>
            <div class="modal-body">
                确认删除该题吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a class="btn btn-danger btn-ok deleteclass">确定删除</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                请确认
            </div>
            <div class="modal-body delmsg" style="display: none">
                您删除了<span class="delnums" style="font-size: 30px"></span>道题,确认保存吗？
                <span class="pull-right badge bg-green delnums"></span>
            </div>
            <div class="modal-body nodelmsg" style="">
                本次测试您没做任何修改。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a class="btn btn-danger btn-ok saveexam">保存</a>
            </div>
        </div>
    </div>
</div>



{{template "admin/page_end.html"}}

<script>
    var custom = [
        'bangTidy',
        'blackgloss'
    ];
    var qu;
    var eid;
    var initlen;
    Array.prototype.remove = function (obj) {
        for (var i = 0; i < this.length; i++) {
            var temp = this[i];
            if (!isNaN(obj)) {
                temp = i;
            }
            if (temp.expression == obj) {
                for (var j = i; j < this.length; j++) {
                    this[j] = this[j + 1];
                }
                this.length = this.length - 1;
            }
        }
    };
    $(function () {
        qu = eval({{.questions}});
        eid ={{.exam.ExamID}}
                initlen = qu.length;
        console.log(qu)
    });
    var delthis;
    var mythis;
    var qid;

    $('#confirm-delete2').on('show.bs.modal', function (e) {
        delthis = e.relatedTarget.remove;
        mythis = e.relatedTarget.mythis;
        qid = e.relatedTarget.qid;
    });

    $('#confirm-save').on('show.bs.modal', function (e) {
        if (initlen - qu.length > 0) {
            $('.delmsg').css("display", "");
            $('.nodelmsg').css("display", "none");
            $('span.delnums').text(initlen - qu.length);
        }

    });

    function GetJsonData() {
        var json = {
            "examid": eid,
            "questions": qu
        };
        return json;
    }

    $('.saveexam').click(function () {
        $.ajax({
            type: "POST",
            url: "/admin/exam/save",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(GetJsonData()),
            dataType: "json",
            success: function (result) {
                if (result.succeed) {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                    // $('input[name="password"]').val("");
                    $("#confirm-save").modal("hide");
                    // window.location.href = window.location.href;
                } else {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                }
            },
            error: function (result) {
                $('.top-right').notify({
                    message: {text: result.message},
                    type: custom[1]
                }).show();
            }
        });

        // $.post("/admin/exam/save", {examid: eid, questions: qu}, function (result) {
        //     console.log(result);
        //     if (result.succeed) {
        //         $('.top-right').notify({
        //             message: {text: result.message},
        //             type: custom[1]
        //         }).show();
        //         $('input[name="password"]').val("");
        //         $("#confirm-save").modal("hide");
        //         window.location.href = window.location.href;
        //     } else {
        //         $('.top-right').notify({
        //             message: {text: result.message},
        //             type: custom[1]
        //         }).show();
        //     }
        // }, 'json');
    });

    $('.deleteclass').click(function () {
        qu.remove(qid);
        $("#confirm-delete2").modal("hide");
        delthis.remove(mythis);
    });
</script>
</body>
</html>
{{end}}